<template>
  <div>
    <div class="card" style="margin: 100px 300px">
      <el-form :model="data.form" label-width="100px" label-position="right">
        <el-form-item label="用户名" prop="username">
          <el-input :prefix-icon="User" size="large" v-model="data.user.username" style="width: 400px" />
        </el-form-item>
        <el-form-item label="姓&nbsp;&nbsp;名" prop="name">
          <el-input :prefix-icon="User" size="large" v-model="data.user.name" style="width: 400px" />
        </el-form-item>
        <el-form-item label="密&nbsp;&nbsp;码" prop="password">
          <el-input :prefix-icon="Lock" size="large" v-model="data.user.password" style="width: 400px" show-password />
        </el-form-item>
        <el-form-item label="电&nbsp;&nbsp;话" prop="phone">
          <el-input :prefix-icon="Phone" size="large" v-model="data.user.phone" style="width: 400px" />
        </el-form-item>
        <el-form-item label="邮&nbsp;&nbsp;箱" prop="email">
          <el-input size="large" v-model="data.user.email" style="width: 400px" />
        </el-form-item>
        <el-form-item>
          <el-button size="large" type="primary" style="width: 446px; " @click="save">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue"
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import router from "@/router";
import {Lock, User, Phone } from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL

const data = reactive({
  user: JSON.parse(localStorage.getItem('supermarket-admin') || '{}'),
  formVisible: false,
  form: {},
  username: '',
  name: ''
})

const emit = defineEmits(["updateUser"])

const save = () => {
  request.put('/admin/update', data.user).then(res => {
    if (res.code === '200') {
      ElMessage.success('修改成功')
      router.push('/login')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

</script>
<style>
.el-form-item__label {
  margin-left: 45px;
}
</style>